<template>
  <div class="my-footer">
    <div class="box">
      <div class="f1">
        <div class="l1">
          <img
            class="img1"
            src="../../public/index_img/logo-white.png"
            alt=""
          />
          <img
            class="img2"
            src="../../public/index_img/footer_code.png"
            alt=""
          />
        </div>
        <div class="l2">
          <div class="l2-1">
            <p>关于致美优家</p>
            <ul>
              <li><a href="#">关于我们</a></li>
            </ul>
          </div>
          <div class="l2-2">
            <p>服务内容</p>
            <ul>
              <li><a href="#">美学整配</a></li>
              <li><a href="#">精装改造</a></li>
              <li><a href="#">全屋定制</a></li>
              <li><a href="#">成品家具</a></li>
              <li><a href="#">窗帘软饰</a></li>
            </ul>
          </div>
        </div>
        <div class="l3">
          <div class="l3-1">
            <p>咨询热线</p>
            <ul>
              <li><a href="#">400-6166-505</a></li>
              <li>
                <a href="#">180-1152-6276</a>
                <span>(9:00~21:00)</span>
              </li>
              <li><a href="#" class="a">在线客服</a></li>
            </ul>
          </div>
          <div class="l3-2">
            <p>线下体验店</p>
            <ul>
              <li>富森美家具1号店6楼7楼</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="f2">
        <div class="f2-1">友情链接:</div>
        <div class="f2-2">
          <a href="http://www.bycydzs.com/">博妍餐饮店装修设计</a>
          <a href="https://www.fanweidz.com/">成都泛微定制</a>
          <a href="http://www.laizhoujinyi.com/">镂空字</a>
          <a href="https://www.u-workshop.com/">成都家庭装修</a>
          <a href="https://www.changehome.cn/">成都旧房改造</a>
        </div>
      </div>
      <div class="f3"></div>
      <div class="f4">
        Copyright © 2020 致美优家 &nbsp;|&nbsp;
        <a href="https://beian.miit.gov.cn/">蜀ICP备20004475号-1</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.my-footer {
  width: 100%;
  background-color: #323334;

  .box {
    width: 100%;
    margin: auto;
    // height: 454px;

    .f1 {
      margin: 0 auto;
      padding-top: 30px;
      width: 1050px;
      height: 246px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .l1 {
        width: 200px;
        // background-color: purple;
        .img1 {
          width: 124px;
          height: 32px;
          margin-bottom: 20px;
        }
        .img2 {
          width: 142px;
          height: 142px;
        }
      }
      .l2 {
        width: 340px;
        height: 244px;
        border-left: 1px solid #999999;
        border-right: 1px solid #999999;
        display: flex;
        justify-content: space-between;
        padding: 0 52.5px;
        .l2-1 {
          width: 120px;
          p {
            width: 120px;
            height: 25px;
            color: #999999;
            font-size: 16px;
            border-bottom: 1px solid #999999;
            padding-bottom: 10px;
            margin-bottom: 16px;
          }
          a {
            color: #d2d2d2;
          }
        }
        .l2-2 {
          width: 120px;
          p {
            width: 120px;
            height: 25px;
            color: #999999;
            font-size: 16px;
            border-bottom: 1px solid #999999;
            padding-bottom: 10px;
            margin-bottom: 16px;
          }
          ul {
            li {
              margin-bottom: 5px;
              a {
                color: #d2d2d2;
              }
            }
          }
        }
      }
      .l3 {
        width: 344px;
        height: 244px;
        padding-left: 60px;
        .l3-1 {
          height: 142.5px;
          p {
            width: 120px;
            height: 25px;
            color: #999999;
            font-size: 16px;
            padding-bottom: 10px;
            margin-bottom: 16px;
            border-bottom: 1px solid #999999;
          }
          ul {
            li {
              padding-bottom: 5px;
              a {
                color: #d2d2d2;
                font-size: 18px;
              }
              .a {
                width: 70px;
                height: 23px;
                font-size: 13px;
                border: 1px solid #999999;
                border-radius: 10px;
                padding: 2px 8px;
              }
              span {
                color: #d2d2d2;
                font-size: 15px;
                margin-left: 5px;
              }
            }
          }
        }
        .l3-2 {
          p {
            width: 120px;
            height: 25px;
            color: #999999;
            font-size: 16px;
            padding-bottom: 10px;
            margin-bottom: 16px;
            border-bottom: 1px solid #999999;
          }
          ul {
            li {
              color: #d2d2d2;
              font-size: 18px;
            }
          }
        }
      }
    }
    .f2 {
      width: 1200px;
      height: 24px;
      margin: 40px 110.5px 0;
      display: flex;
      align-items: center;
      .f2-1 {
        width: 80px;
        height: 100%;
        color: #eeeeee;
      }
      .f2-2 {
        a {
          margin-right: 12px;
          color: #cccccc;
        }
      }
    }
    .f3 {
      background-color: #999999;
      margin: 30px auto;
      width: 1066px;
      height: 1px;
    }
    .f4 {
      text-align: center;
      font-size: 16px;
      color: #cccccc;
      padding-bottom: 30px;
      a {
        color: #999999;
        font-size: 16px;
      }
    }
  }
}
</style>
<style src="../assets/css/reset.css" scoped></style>
